<template>
  <el-col class="submitForm-el-col" :span="24">
    <fieldset class="fieldset">
      <legend class="legend">{{userTaskName}}</legend>
      <!--供选人群-->
      <div class="div_left">
        <el-tree ref="userTree" :data="userDataTree" :props="defaultProps" @check="handleCheckChange" show-checkbox>
        </el-tree>
      </div>
      <!--按钮-->
      <div class="div_mid">
        <i class="el-icon-d-arrow-right"></i>
      </div>
      <!--入选人员-->
      <el-table :data="selectedUserData" :show-header="false" class="div_right" size="mini"
        :row-style="{height: '25px'}">
        <el-table-column prop="label"></el-table-column>
        <el-table-column prop="id" v-if="false"></el-table-column>
      </el-table>
    </fieldset>
  </el-col>
</template>

<script>
  import {
    initCandidate
  } from "@/api/process/processForm.js";



  export default {
    name: "submitFormUserSelect",
    props: {
      //环节名称属性
      userTaskName: String,
      userTaskId: String,
      //用户范围选择方式
      userChoiceType: {
        type: String,
        default: 'null'
      },
      //环节范围参数(组织ID，角色ID)
      appointUser: {
        type: String
      },
      appointUser_cn: {
        type: String
      },
      appointUser_dept: {
        type: String
      },
      appointCompany: {
        type: String
      },
      appointDept: {
        type: String
      },
      appointTeam: {
        type: String
      },
      role: {
        type: String
      },
      orgField: {
        type: String
      },
      //扩展参数(一般传入指定人员的数组)
      extendParams: [],
      //单选 or 多选  默认单选
      singleUser: {
        type: Boolean,
        default: true
      },
    },
    data() {
      return {
        userDataTree: [],
        selectedUserData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },

      }
    },
    created() {

    },
    mounted() {
      let dataInfo = {
        appointUser: this.$props.appointUser,
        appointUser_cn: this.$props.appointUser_cn,
        appointUser_dept: this.$props.appointUser_dept,
        appointCompany: this.$props.appointCompany,
        appointDept: this.$props.appointDept,
        appointTeam: this.$props.appointTeam,
        role: this.$props.role,
        orgField: this.$props.orgField,
        extendParams: this.$props.extendParams
      };

      initCandidate(this.$props.userChoiceType,dataInfo).then(response => {
        this.userDataTree = response.data;
      });
    },
    methods: {
      //1单选，2多选，3部门限选一个
      handleCheckChange(data, checked, indeterminate) {
        // console.log(data, checked, indeterminate);
        this.selectedUserData = {};
        // console.log(this.$refs.userTree.getCheckedNodes(true,false))
        this.selectedUserData = this.$refs.userTree.getCheckedNodes(true, false);
        let temp = {
          userTaskId: this.userTaskId,
          userTaskName: this.userTaskName,
          selectedUser: this.selectedUserData
        };
        console.log("handleCheckChange->", temp)
        this.$emit("userSelectEvent", temp);
      },

    }
  };
</script>

<style>
  .submitForm-el-col .fieldset {
    /* display: flex; */
    justify-content: center;
    width: 376px;
  }

  .submitForm-el-col .fieldset .legend {
    font-size: 14px;
    color: red;
  }

  .submitForm-el-col .fieldset .div_left {
    height: 200px;
    width: 210px;
    border: 1px solid gainsboro;
    float: left;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .submitForm-el-col .fieldset .div_mid {
    height: 200px;
    width: 35px;
    float: left;
    padding-top: 100px;
    text-align: center;
  }

  .submitForm-el-col .fieldset .div_right {
    height: 200px;
    width: 100px;
    float: left;
    padding-left: 8px;
    border: 1px solid gainsboro;
    overflow-y: auto;
    overflow-x: hidden;
  }
</style>
